<template>
  <div>
	  	<myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="mysrc">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{info.name}}</h2>
					<p class="lead mt-2 mb-3 primary-color">价格{{info.price}}</p>
					<h5 class="mt-4">Description</h5>
					<!-- {{info.params}} -->
					
					<br />

					颜色:{{ param.color }}

					
					<br />

					号码:{{ param.size }}

					<br />

					<br />

					款型:{{ param.season }}

					<br />






					
					<h5 class="mt-5">Care Instructions</h5>
					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a href="javascript:void(0)" @click="add_cart" class="btn btn-full-width btn-lg btn-outline-primary">
						添加购物车</a>
					
					
					<!-- 商品评论  v-autosize自适应面积 v-wordcount='100'字数限制-->
					<textarea v-model="comment" rows="10" v-autosize v-wordcount="100">
						

					</textarea>

					<br /><br />

					<Button @click="submit" color="blue">提交评论</Button>

					<!-- 评论列表 -->
					<ul>
						<li v-for="(item,index) in commentlist" :key="index">
							{{change_uid(item.uid)}} 评论: {{item.content}}
						</li>
					</ul>					
					
					</div>

					<br/>
			



			</div>
		</div>
	</section>
	
	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>	
    
  </div>
  
</template>


 
<script>


//导入组件
import myheader from './myheader.vue'
export default {
  data () {
    return {
      msg: "这是一个变量",
	  //商品id
	  id:'',
	  //商品详情
	  info:[],
	  //商品规格
	  param:[],
	  //图片地址,
	  mysrc:'',
	  //声明评论内容
	  comment:'',
	  //评论列表
	  commentlist:[],
	  //用户名列表
	  users:{},
	  //购物车列表
	  cartlist:[]

    }
  },
  mounted:function(){
	  //获取商品id
	  this.id = this.$route.query.id
	  console.log(this.id)
	  //调用商品信息展示
	  this.get_good()
	  //调用评论展示
	  this.get_comment()
	  //获取用户名列表
	  this.get_users()

	  //获取购物车列表
	  this.init_cart()

   
  
},

methods:{
	//初始化购物车
	init_cart(){
		var cartdata=localStorage.getItem('cart')
		if(cartdata == null){
			this.cartlist=[]
		}
		else{
			this.cartlist=JSON.parse(cartdata)
		}
	},


	//添加购物车
	add_cart(){
		//默认购物车内没有该商品
		let findgood=0

		//如果该商品没在购物车
		if(findgood==0){
			this.cartlist.push({'name':this.info.name,'price':this.info.price,'num':1,'img':this.info.img})
		}
		//如果该商品已经在购物车里，点击添加，则数量加+1
		for(let i =0 ;i<this.cartlist.length;i++){
			if(this.info.name==this.cartlist[i]['name']){
				this.cartlist[i]['num']++
				//声明找到了该商品
				findgood = 1;
				//结束循环
				break
			}
		}
		
		console.log(this.cartlist)
		//状态保持
		localStorage.setItem('cart',JSON.stringify(this.cartlist))

	},
	//替换用户名
	change_uid(uid){
		return this.users[uid]

	},
	//获取用户名
	get_users(){
		 this.axios.get('http://localhost:8000/getusers/')
		 .then(result=>{
			 console.log(result)
			 //遍历替换
			 for(let i=0 ;i<result.data.length;i++){
				 this.users[result.data[i]['id']]=result.data[i]['username']
			 }
		 })

	},

	  //获取商品评论
	get_comment(){
		
		 this.axios.get('http://localhost:8000/commentlist/',{params:{gid:this.id}})
		 .then(result=>{
			 console.log(result)
			 this.commentlist=result.data
			 //添加展示数据 头部添加（右侧)
			 this.commentlist.unshift({'uid':localStorage.getItem('uid'),'content':this.comment})
		 })		  
	},



	  //提交评论
  		submit:function(){

  		if(this.comment==''){

  			this.$Message("评论不能为空");
  			return false;
  		}

  		this.comment = this.comment.replace(/ /g,'');

  		if(this.comment.length > 100){

  			this.$Message("超出了长度限制");
  			return false;
  		}

  		//请求入库
  		//发送请求
      this.axios.post('http://localhost:8000/commentinsert/',{uid:localStorage.getItem("uid"),gid:this.id,content:this.comment}).then((result) =>{

        console.log(result);

        this.$Message(result.data.message);

	  });
	  },  




	//获取商品信息
	get_good(){
      this.axios.get('http://localhost:8000/goodsinfo/',{params:{id:this.id}})
      .then(a=>{
		  this.info=a.data
		  console.log(a)
		  console.log('这个info打印结果',this.info)

		  //商品规格转化，字符串转json
		  this.param = JSON.parse(this.info.params)
		//   console.log('转化结果',this.param)

		  //给商品信息地址赋值
		  this.mysrc = 'http://localhost:8000/static/upload/'+this.info.img

       
      })
    },


     
  },
   //注册组件标签
  components:{

  	'myheader':myheader

  },
}



</script>
 
<style>



</style>